<template>
	<navigatorComp :title="genealogySurname + '氏一家人'" bgcColor="#121512" fontColor="#fff">
		<!-- <template #rightWrap>
			<view
				class="edit"
				@click="
					goUrl(
						`/subPages/home/clan/manage_clan?createUserId=${createUserId}&&genealogyId=${genealogyId}`
					)
				"
			>
				{{ isManager ? '管理' : '更多信息' }}
			</view>
		</template> -->
	</navigatorComp>

	<view class="content">
		<view class="invite" @click="openInvite">
			复制邀请码
			<image src="http://112.124.50.179:8888/imgs/home/copy.png"></image>
		</view>
		<view class="clan_num" :style="{ bottom: bottom ? bottom + 100 + 'px' : '150rpx' }">
			<text>人数：{{ detail.totalNumber }}</text>
			<text style="color: #13acfc">男：{{ detail.manNumber }}</text>
			<text style="color: #e57ba9">女：{{ detail.womanNumber }}</text>
		</view>
		<view class="tree" :style="{ height: navHeight + 32 + 'px' }">
			<view
				class="left"
				@click="
					goUrl(
						`/subPages/home/clan/manage_clan?createUserId=${createUserId}&&genealogyId=${genealogyId}`
					)
				"
			>
				<image
					:src="imgUrl + 'imgs/home/clan_man.png'"
					style="width: 36rpx; height: 36rpx; margin-right: 8rpx"
					mode=""
				></image>
				管理
			</view>
			<view class="right">
				<up-icon
					color="#fff"
					name="search"
					size="24px"
					@click="changeInput"
					style="padding: 0 8rpx"
				></up-icon>
				<view :class="[show && 'show', hide && 'hide']" style="width: 0; margin-right: 0">
					<up-input
						placeholder="输入姓名"
						border="none"
						placeholderStyle="color:#969DA3;font-size:26rpx;"
						clearable
						v-model="search"
						@change="change"
						color="#fff"
						fontSize="28rpx"
					></up-input>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1">
			<wxFamilyTree :familyData="familyTreeData" @clickFamily="clickFamily"></wxFamilyTree>

			<!-- #ifdef MP-WEIXIN || APP -->
			<!-- <wxFamilyTree :familyData="familyTreeData" @clickFamily="clickFamily"></wxFamilyTree> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<!-- <familyTree :familyData="familyTreeData" @clickFamily="clickFamily"></familyTree> -->
			<!-- #endif -->
		</view>
	</view>

	<!-- 点击亲人，弹出弹框 -->
	<view class="familyModel_box">
		<up-modal :show="familyModel.show" :showConfirmButton="false">
			<view class="familyModel">
				<image
					v-if="!currentFamily.headUrl"
					:src="
						currentFamily.gender == 2
							? 'http://112.124.50.179:8888/imgs/home/tx_female.png'
							: 'http://112.124.50.179:8888/imgs/home/tx_male.png'
					"
					mode=""
					class="familyModel_avater"
				></image>
				<image
					v-else
					:src="currentFamily.headUrl"
					mode=""
					class="familyModel_avater"
				></image>
				<view class="familyModel_content">
					<view class="familyModel_content_close_icon">
						<up-icon
							@click="familyModel.show = false"
							name="close"
							color="#0E0E0E"
							size="23"
						></up-icon>
					</view>
					<view class="familyModel_content_name">{{ currentFamily.name }}</view>
					<view class="addFamilyType_box_row">
						<!-- 两种情况不展示配偶：
						1、配偶
						2、是女生，且不为独生女
						 3、女性，有配偶-->
						<view
							v-if="
								!(
									currentFamily.partner == 1 ||
									(currentFamily.gender == 2 && !currentFamily.onlyDaughter) ||
									(currentFamily.gender == 2 && currentFamily.partner)
								)
							"
							:class="[
								'addFamilyType_item',
								currentFamily.gender == 2 && 'addFamilyType_item_male'
							]"
							@click="addFamily({ addType: 3 })"
						>
							<u-icon
								name="plus"
								:color="currentFamily.gender === 2 ? '#13ACFC' : '#E57BA9'"
								size="18"
								style="margin-right: 6rpx"
							></u-icon>
							添加配偶
						</view>
						<view
							:class="[
								'addFamilyType_item',
								item.gender == 1 && 'addFamilyType_item_male'
							]"
							v-for="(item, index) in addFamilyTypePopup.familyTypeList"
							@click="addFamily({ addType: item.addType })"
						>
							<u-icon
								name="plus"
								:color="item.gender == 1 ? '#13ACFC' : '#E57BA9'"
								size="18"
								style="margin-right: 6rpx"
							></u-icon>
							添加{{ item.name }}
						</view>
					</view>
					<view class="familyModel_content_line"></view>
					<view class="familyModel_content_funcList">
						<view class="familyModel_content_funcItem" @click="editFamily(0)">
							<image
								src="http://112.124.50.179:8888/imgs/home/family_func1.png"
								mode=""
							></image>
							编辑资料
						</view>
						<view class="familyModel_content_funcItem" @click="editFamily(1)">
							<image
								src="http://112.124.50.179:8888/imgs/home/family_detail.png"
								mode=""
							></image>
							资料详情
						</view>
						<view
							class="familyModel_content_funcItem"
							@click="delFamilyModel.show1 = true"
						>
							<image
								src="http://112.124.50.179:8888/imgs/home/family_func3.png"
								mode=""
							></image>
							移除亲人
						</view>
					</view>
				</view>
			</view>
		</up-modal>
	</view>

	<!-- 添加亲人类型弹框 -->
	<myModel
		v-model:show="addFamilyTypePopup.show"
		title=""
		width="622rpx"
		:showCancelBtn="false"
		:showConfirmBtn="false"
	>
		<view class="addFamilyType_model">
			<up-icon
				@click="addFamilyTypePopup.show = false"
				name="close"
				color="#0E0E0E"
				size="23"
				class="addFamilyType_box_close_icon"
			></up-icon>
			<view class="addFamilyType_box display_flex">
				<view class="display_flex" v-if="!currentFamily.partner">
					<view
						:class="[
							'addFamilyType_item',
							!currentFamily.gender == 1 && 'addFamilyType_item_male'
						]"
						style="width: 212rpx; margin-bottom: 32rpx"
						@click="addFamily({ addType: 3 })"
					>
						<u-icon
							name="plus"
							:color="currentFamily.gender === 2 ? '#13ACFC' : '#E57BA9'"
							size="18"
							style="margin-right: 6rpx"
						></u-icon>
						添加配偶
					</view>
				</view>
				<view class="addFamilyType_box_row">
					<view
						:class="[
							'addFamilyType_item',
							item.gender == 1 && 'addFamilyType_item_male'
						]"
						v-for="(item, index) in addFamilyTypePopup.familyTypeList"
						@click="addFamily({ addType: item.addType })"
					>
						<u-icon
							name="plus"
							:color="item.gender == 1 ? '#13ACFC' : '#E57BA9'"
							size="18"
							style="margin-right: 6rpx"
						></u-icon>
						添加{{ item.name }}
					</view>
				</view>
			</view>
		</view>
	</myModel>

	<!-- 上香祭拜弹框 -->
	<myModel
		v-model:show="worshipPopup.show"
		title=""
		:showCancelBtn="false"
		:showConfirmBtn="false"
	>
		<view class="family_model">
			<view class="family_model_close">
				<u-icon
					name="close"
					color="#666666"
					size="23"
					@click="worshipPopup.show = false"
				></u-icon>
			</view>
			<view class="family_model_content">
				愿逝者安息。愿生者坚强在这个艰难时刻,请知道我们与你们同在,愿美好的回忆带给你们安慰,请接受我们最深切的哀悼。
			</view>
			<view class="family_model_btnList">
				<view
					class="family_model_btn"
					style="font-size: 22rpx"
					@click="memoryHallPopup.show = true"
				>
					已有纪念馆,去绑定
				</view>
				<view
					class="family_model_btn family_model_btn2"
					@click="
						goUrl('/subPages/home/memoryHall/create_memoryHall');
						showModel = false;
					"
				>
					创建纪念馆
				</view>
			</view>
		</view>
	</myModel>

	<!-- 删除亲人确认框 -->
	<myModel
		v-model:show="delFamilyModel.show1"
		title=" "
		content="移除成员后，该成员的所有信息将从家族移除"
		@confirm="removeFamily"
	></myModel>

	<!-- 删除亲人确认框2 -->
	<myModel
		v-model:show="delFamilyModel.show2"
		title=" "
		content="请先清除下方的成员"
		@confirm="removeChidren"
	></myModel>

	<!-- 选择纪念馆弹框 -->
	<popupCompVue
		v-model:show="memoryHallPopup.show"
		title="选择一个纪念馆"
		bgColor="#1E201F"
		fontColor="#fff"
	>
		<view v-if="memoryHallPopup.memoryList.length === 0" class="memory_empty">
			<image src="http://112.124.50.179:8888/imgs/home/poster_empty.png" mode=""></image>
			<view>无可选纪念馆哦</view>
		</view>
		<view v-else class="memoryList">
			<view class="memory" v-for="(item, index) in memoryHallPopup.memoryList">
				<view class="display_flex" v-if="item.type === 'ordinary'">
					<image src="http://112.124.50.179:8888/imgs/home/empty.png" mode=""></image>
					<view class="name singleLineOverflowHidden">派大星</view>
				</view>
				<view class="display_flex" v-else-if="item.type === 'vip'">
					<image src="http://112.124.50.179:8888/imgs/home/empty.png" mode=""></image>
					<view class="name singleLineOverflowHidden">派大星</view>
					<image src="http://112.124.50.179:8888/imgs/home/empty.png" mode=""></image>
					<view class="name singleLineOverflowHidden">派大星</view>
				</view>
				<image
					v-if="memoryHallPopup.choosedMemo == item"
					class="selectIcon"
					src="http://112.124.50.179:8888/imgs/home/selected.png"
					mode=""
				></image>
				<image
					v-else
					class="selectIcon"
					src="http://112.124.50.179:8888/imgs/home/no-select.png"
					mode=""
					@click="chooseMemory(item)"
				></image>
			</view>
		</view>

		<footerBtn
			v-if="memoryHallPopup.memoryList.length === 0"
			bgcColor="#1E201F"
			name="创建纪念馆"
			@clickBtn="goUrl('/subPages/home/memoryHall/index')"
		>
			<image
				class="add_memory_image"
				src="http://112.124.50.179:8888/imgs/home/add_memory.png"
				mode=""
			></image>
		</footerBtn>
		<footerBtn v-else bgcColor="#1E201F" name="确定" @clickBtn="confirmMemoryHall"></footerBtn>
	</popupCompVue>
	<sharePopup
		v-model:show="showShare"
		title="分享到"
		height="592rpx"
		:invitedCode="'无邀请码'"
		:isInvitedCode="true"
	></sharePopup>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { onLoad, onShow, onReady, onHide } from '@dcloudio/uni-app';
import navigatorComp from '/components/navigator/index.vue';
import myModel from '/components/model/index.vue';
import popupCompVue from '/components/popup/index.vue';
import myButton from '/components/button/index.vue';
import footerBtn from '/components/footerBtn/index.vue';
import familyTree from '/components/familyTree/index.vue';
import wxFamilyTree from '@/components/familyTree/wx/index.vue';
import sharePopup from '/components/popup/share.vue';
import { timeFormat } from '@/node_modules/uview-plus';
import { imgUrl } from '@/external/utils/imgUrl';
import HomeApi from '@/API/home/index.js';
import { indexOf } from 'lodash';
import { tree } from 'd3';

//微信小程序上支持类型穿透
defineOptions({
	options: {
		styleIsolation: 'shared'
	}
});

const homeApi = new HomeApi();

const screenWidth = document?.body.clientWidth || uni.getSystemInfoSync().screenWidth;
const windowWidth = window?.innerWidth || uni.getSystemInfoSync().screenWidth;
const navHeight = getApp().globalData.navHeight;
const bottom = getApp().globalData.bottom;

// 搜索动画
const show = ref(false);
const hide = ref(false);
const search = ref('');

const genealogySurname = ref(''); //姓氏
const genealogyId = ref(0); //族谱id
const createUserId = ref(0); //创建族谱的id
const isManager = ref(false); //是否是管理人员
const userId = uni.getStorageSync('userInfo').userId;
const familyTreeData = ref({}); //家庭树信息
const currentFamily = ref({}); //打开弹框的用户信息
const showShare = ref(false);
// 亲人功能弹框
const familyModel = reactive({
	show: false
});
//添加亲人类型弹框
const addFamilyTypePopup = reactive({
	show: false,
	familyTypeList: [
		{
			name: '儿子',
			gender: 1,
			addType: 1
		},
		{
			name: '女儿',
			gender: 2,
			addType: 2
		}
	]
});
//上香祭拜弹框
const worshipPopup = reactive({
	show: false
});
//选择纪念馆弹框
const memoryHallPopup = reactive({
	show: false,
	choosedMemo: '',
	memoryList: [
		{
			type: 'ordinary'
		},
		{
			type: 'vip'
		}
	]
});
//删除亲人确认框
const delFamilyModel = reactive({
	show1: false,
	show2: false
});
const detail = ref({});

onLoad((options) => {
	createUserId.value = options.createUserId; //创建的用户id
	genealogyId.value = options.genealogyId;
	genealogySurname.value = options.genealogySurname; //族谱姓氏

	if (options.createUserId == userId) {
		isManager.value = true;
	} else {
		isManager.value = false;
	}
});

onShow((options) => {
	getFamily();
});

onHide(() => {
	show.value = false;
	hide.value = false;
	search.value = '';
});

/**
 * 获取亲人列表
 */
const getFamily = () => {
	homeApi.getKinsfolkList(genealogyId.value).then((res) => {
		if (res.code === 0) {
			detail.value = res.data;
			if (res.data.kinsfolkList && res.data.kinsfolkList.length > 0) {
				let handleList = judgeOnlyDaughter(res.data.kinsfolkList);
				familyTreeData.value = getFamliyTree(handleList);
			}
		}
	});
};

/**
 * 判断是否是只有女儿
 * 方法：判断路径是否相同
 */
const judgeOnlyDaughter = (list) => {
	let pathArr = {};

	//计算各个路径的男性次数
	list.forEach((item) => {
		if (item.gender === 1) {
			pathArr[item.genealogyPath] == undefined
				? (pathArr[item.genealogyPath] = 1)
				: pathArr[item.genealogyPath]++;
		}
	});
	console.log(pathArr);

	//如果是独生女，就添加属性onlyDaughter:1
	let handleList = list.map((item) => {
		if (item.gender === 2 && pathArr[item.genealogyPath] === undefined) {
			return {
				...item,
				onlyDaughter: 1
			};
		} else {
			return { ...item };
		}
	});

	console.log(handleList);
	return handleList;
};

/**
 * 获取树结构信息
 */
const getFamliyTree = (treeArray) => {
	let familyTreeData = {};
	treeArray.map((item, index) => {
		let familyInfo = {
			name: item.name,
			headUrl: item.headUrl,
			gender: item.gender,
			kinsfolkId: item.kinsfolkId,
			relationKinsfolkId: item.relationKinsfolkId,
			onlyDaughter: item.onlyDaughter
		};

		//顶层
		if (index == 0 && item.genealogyPath == '/') {
			familyTreeData = {
				...familyInfo,
				layer: 1
			};
		}
		if (index != 0 && item.genealogyPath == '/') {
			if (familyTreeData.partner) {
				familyTreeData.partner.push({
					...familyInfo,
					partner: 1
				});
			} else {
				familyTreeData.partner = [
					{
						...familyInfo,
						partner: 1
					}
				];
			}
		}

		//下层
		if (item.genealogyPath != '/') {
			insertChildren(item.genealogyPath, familyTreeData, familyInfo)();
		}
	});
	console.log(familyTreeData);
	return familyTreeData;
};

/**
 * 插入亲人
 */
const insertChildren = (path, tree, ele) => {
	let genealogyPath = path.split('/').filter(Boolean);

	let p = genealogyPath[0];
	return function () {
		queryTreeNode(tree, p, genealogyPath, ele);
	};
};

// 查找树
const queryTreeNode = (tree, p, genealogyPath, ele) => {
	let noPartner = true; //是否在配偶下
	if (tree.partner) {
		tree.partner.forEach((item) => {
			if (item.kinsfolkId == p) {
				noPartner = false;
			}
		});
	}
	if (tree.kinsfolkId != p && noPartner) {
		//不在树下，也不在配偶下
		return;
	} else {
		if (p == genealogyPath[genealogyPath.length - 1]) {
			if (tree.children && tree.children.length > 0) {
				let isPartner = false;
				tree.children.forEach((child) => {
					if (ele.relationKinsfolkId === child.kinsfolkId) {
						if (child.partner) {
							child.partner.push({
								...ele,
								partner: 1
							});
						} else {
							child.partner = [
								{
									...ele,
									partner: 1
								}
							];
						}

						isPartner = true;
						return;
					}
				});
				if (!isPartner) {
					tree.children.push({ ...ele, layer: tree.layer + 1 });
				}
			} else {
				tree.children = [];
				tree.children[0] = { ...ele, layer: tree.layer + 1 };
			}
			return;
		} else {
			p = genealogyPath[genealogyPath.indexOf(p) + 1];
			if (tree.children.length > 0) {
				tree.children.map((item) => {
					queryTreeNode(item, p, genealogyPath, ele);
				});
			} else {
				return;
			}
		}
	}
};

/**
 * 点击亲人
 */
const clickFamily = (data) => {
	if (!data.kinsfolkId) {
		//如果没有id，就是新增顶层亲人
		goUrl(`/subPages/home/clan/edit_family?genealogyId=${genealogyId.value}`);
	} else {
		familyModel.show = true;
		currentFamily.value = data;
	}
};

/**
 * 亲人功能弹框——添加亲人
 */
const addFamily = (item) => {
	let gender = 0;
	switch (item.addType) {
		case 1:
			//儿子
			gender = 1;
			break;
		case 2:
			//女儿
			gender = 2;
			break;
		case 3:
			//配偶
			gender = currentFamily.value.gender == 1 ? 2 : 1;
			break;
	}
	goUrl(
		`/subPages/home/clan/edit_family?gender=${gender}&addType=${item.addType}&genealogyId=${genealogyId.value}&relationKinsfolkId=${currentFamily.value.kinsfolkId}&relationKinsfolkGender=${currentFamily.value.gender}`
	);
	familyModel.show = false;
	addFamilyTypePopup.show = false;
};

/**
 * 亲人功能弹框——编辑资料
 */
const editFamily = (isDetail) => {
	goUrl(
		`/subPages/home/clan/edit_family?kinsfolkId=${currentFamily.value.kinsfolkId}&genealogyId=${genealogyId.value}&relationKinsfolkId=${currentFamily.value.kinsfolkId}&relationKinsfolkGender=${currentFamily.value.gender}&isDetail=${isDetail}`
	);
	familyModel.show = false;
};

/**
 * 移除亲人弹框
 */
const removeFamily = () => {
	//如果有后代，不能删除
	if (currentFamily.value.children) {
		delFamilyModel.show2 = true;
		delFamilyModel.show1 = false;
		return;
	}
	homeApi
		.deleteKinsfolk({
			genealogyId: genealogyId.value,
			genealogyPeopleId: currentFamily.value.kinsfolkId
		})
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '移除成功'
				});
				familyModel.show = false;
				delFamilyModel.show1 = false;
				getFamily();
			}
		});
};

/**
 * 移除亲人弹框——移除后代
 */
const removeChidren = () => {
	delFamilyModel.show2 = false;
};

/**
 * 亲人功能弹框——设为中心
 */
const setCenter = () => {};

/**
 * 选择纪念馆弹框——点击纪念馆
 */
const chooseMemory = (item) => {
	memoryHallPopup.choosedMemo = item;
};

/**
 * 选择纪念馆弹框——点击确定
 */
const confirmMemoryHall = (item) => {
	memoryHallPopup.show = false;
	worshipPopup.show = false;
};

const changeInput = () => {
	if (!show.value) {
		show.value = true;
		hide.value = false;
	} else {
		show.value = false;
		hide.value = true;
	}
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
const openInvite = () => {
	showShare.value = true;
};
</script>

<style lang="scss">
page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	background-color: #121512;
}

.content {
	background: url('http://112.124.50.179:8888/imgs/home/clan_bg.png') no-repeat;
	background-size: cover;
	overflow: hidden;
}

.invite {
	background: rgba(0, 0, 0, 0.3);
	// width: 188rpx;
	padding: 0 16rpx;
	height: 54rpx;
	border-radius: 27rpx 0rpx 0rpx 27rpx;
	color: #fff;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 30vh;
	right: 0;
	z-index: 999;

	image {
		padding-left: 4rpx;
		width: 32rpx;
		height: 32rpx;
	}
}

.clan_num {
	padding: 0 40rpx;
	height: 50rpx;
	background: #def5ff;
	border-radius: 25rpx;
	opacity: 0.8;
	font-weight: 400;
	font-size: 24rpx;
	color: #333333;
	line-height: 34rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 32rpx;
	z-index: 999;

	text {
		margin-right: 32rpx;

		&:last-child {
			margin-right: 0;
		}
	}
}

.edit {
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
	line-height: 32rpx;
	text-align: right;
}

.content {
	padding: 0;
	position: relative;
	overflow: hidden;

	.tree {
		position: absolute;
		width: 100%;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		color: #fff;
		z-index: 999;

		.left {
			// background-color: #0e0e0e;
			border: 2rpx solid #0e0e0e;
			border-radius: 32rpx;
			width: 152rpx;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #0e0e0e;
		}

		.right {
			background-color: #0e0e0e;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			min-width: 64rpx;
			box-sizing: border-box;
			height: 64rpx;

			.inputbox {
				width: 0;
			}

			.show {
				animation: showAni 0.5s forwards ease;
			}

			.hide {
				animation: hideAni 0.5s forwards ease;
			}

			@keyframes showAni {
				0% {
					width: 0;
					margin-right: 0;
				}

				100% {
					width: 210rpx;
					margin-right: 16rpx;
				}
			}

			@keyframes hideAni {
				0% {
					width: 210rpx;
					margin-right: 16rpx;
				}

				100% {
					width: 0;
					margin-right: 0;
				}
			}

			::v-deep .uni-input-input {
				font-size: 26rpx !important;
				color: #fff !important;
			}
		}
	}

	.con {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.LEFT {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;

			view:nth-child(1) {
				font-size: 26rpx;
				margin-bottom: 6rpx;

				text {
					color: #fd7883;
					font-weight: bold;
				}
			}

			view:nth-child(2) {
				font-size: 22rpx;
				color: #666666;
			}
		}

		.generation {
			margin-left: 140rpx;
			display: flex;

			.generation_ {
				width: 116rpx;
				height: 264rpx;
				background: url('http://112.124.50.179:8888/imgs/home/tx_bg.png') no-repeat;
				background-size: cover;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-top: 24rpx;
				}

				.name {
					margin-top: 8rpx;
					width: 1px;
					display: flex;
					align-items: center;
					justify-content: center;

					view {
						color: #84785b;
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.top_line {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 140rpx;

		.line:nth-child(1) {
			width: 0rpx;
			height: 98rpx;
			border: 2rpx solid #84785b;
		}

		.line:nth-child(2) {
			width: 28rpx;
			height: 0rpx;
			border: 2rpx solid #84785b;
		}
	}

	.bottom_line {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 140rpx;

		.lines {
			display: flex;
			justify-content: space-between;
			width: 184rpx;
		}

		.line1 {
			width: 0rpx;
			height: 38rpx;
			border: 2rpx solid #84785b;
		}

		.line2 {
			width: 180rpx;
			height: 0rpx;
			border: 2rpx solid #84785b;
		}

		.line3 {
			width: 0;
			height: 24rpx;
			border: 2rpx solid #84785b;
		}

		.line4 {
			width: 0;
			height: 24rpx;
			border: 2rpx solid #84785b;
		}
	}
}

.L1 {
	.LEFT {
		left: 0rpx;
	}
}

.L2 {
	.LEFT {
		left: 0rpx;
	}

	.generation {
		position: relative;
		bottom: 36rpx;

		.generation_ {
			margin: 0 12rpx;
		}
	}
}

.L3 {
	position: relative;
	bottom: 36rpx;

	.LEFT {
		left: 0;
	}

	.generation_ {
		margin: 0 32rpx;
	}
}

.familyModel_box {
	::v-deep .u-popup__content {
		background: none !important;

		::v-deep .u-modal__content {
			padding: 0 !important;
		}
	}

	::v-deep .u-line {
		display: none !important;
	}
}

.familyModel {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.familyModel_avater {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		z-index: 99999;
	}

	.familyModel_content {
		width: 100%;
		margin-top: -60rpx;
		width: 622rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;

		.familyModel_content_close_icon {
			position: absolute !important;
			right: 16rpx !important;
			top: 16rpx !important;
		}

		.familyModel_content_name {
			margin-top: 76rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			letter-spacing: 1px;
			text-align: center;
			width: 100%;
			margin-bottom: 40rpx;
		}

		.addFamilyType_box_row {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;

			.addFamilyType_item {
				// margin-bottom: 32rpx;
				width: 168rpx;
				height: 64rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 2rpx solid #e57ba9;
				font-weight: 400;
				font-size: 24rpx;
				color: #e57ba9;
				line-height: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.addFamilyType_item_male {
				border: 2rpx solid #13acfc;
				color: #13acfc;
			}
		}

		.familyModel_content_line {
			margin-top: 40rpx;
			width: 558rpx;
			height: 2rpx;
			background-color: #f5f5f5;
			border-radius: 2rpx;
		}

		.familyModel_content_funcList {
			margin-top: 32rpx;
			padding-bottom: 32rpx;
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			.familyModel_content_funcItem {
				display: flex;
				align-items: center;
				flex-direction: column;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 24rpx;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 16rpx;
				}
			}
		}
	}
}

.family_model {
	position: relative;
	width: 100%;

	.family_model_close {
		position: absolute;
		right: -16rpx;
		top: 16rpx;
	}

	.family_model_content {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 42rpx;
		text-align: justify;
		margin-top: 60rpx;
	}

	.family_model_btnList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;

		.family_model_btn {
			width: 210rpx;
			height: 80rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #f3e0bb;
			font-weight: 400;
			font-size: 28rpx;
			color: #0e0e0e;
			line-height: 80rpx;
			text-align: center;
		}

		.family_model_btn2 {
			background-color: #f3e0bb;
		}
	}
}

.memoryList {
	margin: 40rpx 32rpx 0;
	height: 900rpx;

	.memory {
		width: 100%;
		height: 224rpx;
		background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 24rpx 16rpx 24rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	image {
		width: 132rpx;
		height: 176rpx;
		border-radius: 7rpx 7rpx 7rpx 7rpx;
		margin-right: 24rpx;
	}

	.name {
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;
		width: 100rpx;
		margin-right: 32rpx;
	}

	.selectIcon {
		width: 56rpx;
		height: 56rpx;
	}
}

.memory_empty {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 516rpx;
	box-sizing: border-box;

	image {
		width: 330rpx;
		height: 252rpx;
	}

	view {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 42rpx;
		margin-top: 32rpx;
	}
}

.add_memory_image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 4rpx;
}

.addFamilyType_model {
	width: 100%;
	position: relative;

	.addFamilyType_box_close_icon {
		position: absolute;
		right: -16rpx;
		top: 16rpx;
	}

	.addFamilyType_box {
		flex-direction: column;
		margin-top: 48rpx;

		.addFamilyType_box_row {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-column-gap: 80rpx;
			grid-row-gap: 32rpx;
		}

		.addFamilyType_item {
			// margin-bottom: 32rpx;
			width: 168rpx;
			height: 64rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #e57ba9;
			font-weight: 400;
			font-size: 24rpx;
			color: #e57ba9;
			line-height: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.addFamilyType_item_male {
			border: 2rpx solid #13acfc;
			color: #13acfc;
		}
	}
}
</style>
